<script lang="ts" setup>
import pageHeader from "@/components/pageHeader.vue";
import { onMounted, ref, watch } from "vue";
import { meMyPlayList, tcPlayerRankList } from "@/api/games";
import moment from "moment";
import navTo from "@/utils/navTo";
import i18n from "@/i18n";
import noData from "@/components/noData.vue";
const active = ref("rng_fish");
const loading = ref(false);
const myPlay = ref([]);
const rankList = ref([]);

const getMyplay = async () => {
  try {
    loading.value = true;
    let res = await meMyPlayList({
      gameType: active.value,
    });
    res.value.data.rows.forEach((item: any) => {
      item.icon =
        "https://images.b51613.com:42666/TCG_GAME_ICONS/AG/" +
        item.gameCode +
        ".png";
    });
    myPlay.value = res.value.data.rows || [];
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

watch(active, () => {
  myPlay.value = [];
  getMyplay();
});
onMounted(() => {
  getMyplay();
});
</script>

<template>
  <div class="page">
    <mHeader :lineShow="true" />
    <pageHeader>
      <template #title>{{ $t("MeT10") }}</template>
    </pageHeader>
    <div class="content">
      <div class="box1 t30">
        <div class="box1Title flex items-center">
          <van-tabs
            title-active-color="#fff"
            title-inactive-color="#999"
            v-model:active="active"
            shrink
          >
            <van-tab
              :title="$t('GameT1') + ' & ' + $t('GameT2')"
              name="rng_fish"
            ></van-tab>
            <van-tab :title="$t('GameT3')" name="live"> </van-tab>
          </van-tabs>
        </div>
        <div class="h30" />
        <noData v-if="!loading && myPlay.length == 0">
          <template #desc>{{ i18n.global.t("ZWSJ") }}</template></noData
        >
        <van-skeleton v-if="loading" title :row="10" />
        <div v-if="!loading">
          <div
            v-for="(item, index) in myPlay"
            :key="index"
            :class="index % 2 == 0 ? 'cell color1' : 'cell'"
          >
            <img class="img" :src="item.icon" />
            <div class="info">
              <div class="topItem">
                {{ $t("HomeT7") }}：{{ item.gameCategory }}
                <div style="flex: 1" />
                {{ moment(item.betTime).format("YYYY-MM-DD HH:mm:ss") }}
              </div>
              <div class="top6">
                {{ $t("HomeT8") }}：{{ item.betAmount }} USDT
              </div>
              <div class="top6">
                {{ Number(item.netPnl) > 0 ? $t("HomeT9") : $t("HomeT10") }}：{{
                  Math.abs(item.netPnl)
                }}
                USDT
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/style/constant.scss";
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #1a2c38;
  .content {
    padding: 96 * $_ru 20 * $_ru 20 * $_ru 20 * $_ru;
    .t30 {
      margin-top: 20 * $_ru;
    }
    .box1 {
      padding: 20 * $_ru;
      background: #0f212e;
      border-radius: 12 * $_ru;
      .grid {
        margin-top: 6 * $_ru;
        .item {
          align-items: flex-start;
          justify-content: flex-start;
        }
      }
      .img {
        width: 100%;
      }
      .name {
        font-size: 24 * $_ru;
        color: #fff;
        margin: 10 * $_ru 0;
        text-align: center;
        font-weight: bold;
      }
      .h30 {
        height: 30 * $_ru;
      }
      .box1Title {
        font-family: PingFang SC;
        font-size: 28 * $_ru;
        font-weight: 500;
        color: #fff;
        .more {
          font-size: 24 * $_ru;
          color: #b1bad3;
        }

        > img {
          width: 40 * $_ru;
          height: 40 * $_ru;
          margin-left: 8 * $_ru;
        }
      }
      .cell {
        display: flex;
        flex-direction: row;
        // align-items: center;
        padding: 20 * $_ru 10 * $_ru;
        font-size: 24 * $_ru;
        color: #fff;
        font-weight: 400;
        border-radius: 4 * $_ru;
        .info {
          display: flex;
          flex: 1;
          flex-direction: column;
          margin-left: 20 * $_ru;
          .top6 {
            margin-top: 6 * $_ru;
          }
          .topItem {
            display: flex;
            align-items: center;
          }
        }
        .img {
          width: 120 * $_ru;
          border-radius: 6 * $_ru;
        }
      }
      .account {
        margin-top: 40 * $_ru;

        .accountL {
          .accountLt {
            > img {
              width: 48 * $_ru;
              height: 48 * $_ru;
              margin-right: 16 * $_ru;
            }

            font-family: Mont;
            font-size: 40 * $_ru;
            font-weight: 700;
            color: #fff;

            > div {
              > span {
                font-family: Mont;
                font-size: 28 * $_ru;
                font-weight: 600;
                color: #fff;
                margin-left: 8 * $_ru;
              }
            }
          }
        }
        .right20 {
          margin-right: 20 * $_ru;
        }
        .accountR {
          padding: 15 * $_ru 40 * $_ru;
          border-radius: 40 * $_ru;
          background: #1a2c38;
          font-family: PingFang SC;
          font-size: 24 * $_ru;
          color: #fff;
          font-weight: 600;
        }
      }
    }
  }
}
</style>